<template>
	<BasicNav title="318国道系统" placeholder></BasicNav>
	<view class="box">
		<up-input placeholder="请输入内容" v-model="searchValue" border="surround" clearable prefixIcon="search"
			prefixIconStyle="font-size: 22px;color: #909399"></up-input>
		<view class="pickers">
			<view class="picker" @click="pickerShow1">{{ value1 }}</view>
			<view class="picker" @click="pickerShow2">
				<span v-if="value2">{{ value2 }}</span>
				<span v-else style="color: #909399">请选择省份</span>
			</view>
		</view>
	</view>

	<BasicContent :customStyle="{
		padding: '20rpx 10rpx',
		backgroundColor: '#F8F8F8'
	}" :height="80" @refresh="refresh">
		<view class="list">
			<view class="item" v-for="i in list" :key="i.name" @click="goDetail(i)">
				<view class="img-box">
					<image class="img" src="../../static/demo.png" mode="scaleToFill" />
				</view>
				<view class="title">{{ i.name }}</view>
			</view>
		</view>
	</BasicContent>

	<up-picker :show="show1" :columns="columns1" @cancel="show1 = false" @confirm="confirm1"></up-picker>
	<up-picker :show="show2" :columns="columns2" @cancel="show2 = false" @confirm="confirm2"></up-picker>

</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import config1 from '@/config';

const list = ref([])
const searchValue = ref('')
const value1 = ref('全部')
const show1 = ref(false);
const show2 = ref(false);
const value2 = ref('')
const citys = ref([
	{
		id: "1211",
		name: "全部",
	},
	{
		id: "1",
		name: "北京市",
	},
	{
		id: "2",
		name: "浙江",
		children: [
			{
				id: "21",
				name: "嘉兴",
			},
			{
				id: "22",
				name: "长兴",
			}
		]
	}
]);
const columns1 = computed(() => {
	return [citys.value.map(i => i.name)]
})
const columns2 = computed(() => {
	const arr = citys.value.find(i => i.name == value1.value).children?.map(i => i.name)
	// value2.value = arr?.[0]
	return [arr]
})
const pickerShow1 = () => {
	show1.value = true
}
const pickerShow2 = () => {
	if (value1.value == '全部') {
		uni.showToast({
			title: '请先选择省份',
			icon: 'none'
		})
		return
	}
	show2.value = true
}
const confirm1 = ({ value }) => {
	value1.value = value[0]
	show1.value = false
	value2.value = ''
}
const confirm2 = ({ value }) => {
	value2.value = value[0]
	show2.value = false
}

const goDetail = (i) => {
	console.log("a", i);
	uni.navigateTo({
		url: '/pages/web/index?name=' + i.name
	})

}

const getModel = async () => {
	try {
		uni.showLoading({
			title: '加载中'
		})
		const res = await uni.request({
			url: config1.baseUrl + '/json/model.json',
		})
		if (res.statusCode != 200) return uni.showToast({
			title: '获取模型失败',
			icon: 'none'
		})
		list.value = res.data.model
	} catch (err) {
		uni.showToast({
			title: '获取模型失败',
			icon: 'none'
		})
	} finally {
		uni.hideLoading()
	}
}

const refresh = () => {
	getModel()
}
onMounted(() => {
	getModel()
})
</script>

<style scoped lang="scss">
.box {
	padding: 10rpx;

	.pickers {
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		gap: 10rpx;

		.picker {
			flex: 1;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border: 1px solid #dadbde;
		}
	}
}

.list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 20rpx 10rpx;

	.item {
		background: #fff;
		border-radius: 20rpx;

		.img-box {
			width: 100%;
			height: 300rpx;

			.img {
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				width: 100%;
				height: 100%;
			}
		}

		.title {
			padding: 20rpx;
			text-align: center;
		}
	}
}
</style>